<template>
  <div id="header">
    <Row type="flex">

      <Col span="18">
        <div class="logo">
          <a href="#/">
            <img src="../../assets/images/logo.png"/>
          </a>
        </div>
        <h1>{{ userInfo.rclubName }}活动/赛事发布管理系统</h1>
      </Col>

      <Col span="6">
        <div class="header-btn fr header-logout">
          <i class="iconfont icon-tuichu fs10" @click="logout"></i>
        </div>

        <div class="header-btn fr">
            您好, {{ userInfo.userName }}
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'app-header',
    data () {
      return {
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      logout (command) {
        this.$store.dispatch('logout')
        this.$Spin.show({
          render: (h) => {
            return h('div', [
              h('Icon', {
                'class': 'demo-spin-icon-load',
                props: {
                  type: 'load-c',
                  size: 18
                }
              }),
              h('div', 'Loading')
            ])
          }
        })
        setTimeout(() => {
          this.$Spin.hide()
        }, 100)
      }
    },
    async mounted () {
      await this.$store.dispatch('getUserInfo')
      document.title = `${this.userInfo.rclubName}活动/赛事发布管理系统`
    }
  }
</script>

<style lang="less">
  #header {
    height: 60px;
    background-color: #5996d3;
    color: #fff;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    .logo {
      width: 210px;
      height: 60px;
      padding-left: 25px;
      padding-top: 10px;
      float: left;
      background: #4481bd;
      img {
        margin-left: 18px;
      }
    }

    h1 {
      float: left;
      height: 60px;
      font-size: 18px;
      line-height: 60px;
      margin-left: 20px;
    }

    .header-btn {
      text-align: center;
      font-size: 14px;
      padding: 21px 10px;
      cursor: pointer;

      &.header-logout {
        padding: 19px 22px 21px 10px;
        opacity: 0.7;
        &:hover {
          opacity: 1
        }
      }
    }
  }
</style>
